<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/admin/static/css/font.css">
    <link rel="stylesheet" href="/admin/static/css/xadmin.css">
    <link rel="stylesheet" href="/admin/static/webuploader/0.1.5/webuploader.css">
    <script type="text/javascript" src="/admin/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/admin/static/js/jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="/admin/static/js/xadmin.js"></script>
    <script type="text/javascript" src="/admin/static/webuploader/0.1.5/webuploader.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]--></head>

<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form" id="form_data">

            <div class="layui-form-item">
                <label for="L_email" class="layui-form-label">
                    <span class="x-red">*</span>标题</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">

                </div>
                <div class="layui-form-mid layui-word-aux">

                </div><div class="layui-form-item">
                    <label class="layui-form-label">板块</label>
                    <div class="layui-input-block">
                        <select name="cate_id" lay-filter="aihao">
                            @foreach($cate_d  as $va)
                                <option name="cate_id" value="{{$va->id}}">{{$va->cate_name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_username" class="layui-form-label">
                        <span class="x-red">*</span>封面</label>
                    <div class="layui-input-inline">
                        <div id="uploader-demo">
                            <!--用来存放item-->
                            <div id="fileList" class="uploader-list">
                            </div>
                            <div id="filePicker">选择图片</div>
                            <br>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">内容</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容"  name="content" class="layui-textarea"></textarea>
                    </div>
                </div>
                {{csrf_field()}}

                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">

                            <input type="radio" name="TFlag" value="1" title="发布" checked="">
                            <input type="radio" name="TFlag" value="0" title="删除" >

                    </div>
                </div>




                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label"></label>
                    <button class="layui-btn" lay-filter="add" lay-submit="">修改</button></div>
        </form>
    </div>
</div>
<script>layui.use(['form', 'layer'],
        function() {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;

            //自定义验证规则
            form.verify({
                nikename: function(value) {
                    if (value.length < 5) {
                        return '昵称至少得5个字符啊';
                    }
                },
                pass: [/(.+){6,12}$/, '密码必须6到12位'],
                repass: function(value) {
                    if ($('#L_pass').val() != $('#L_repass').val()) {
                        return '两次密码不一致';
                    }
                }
            });

            //监听提交
            form.on('submit(add)',
                function(data) {

                    $.ajax({
                        type: 'post',
                        url: '/admin/topic/add_up',
                        data: $("#form_data").serialize(),
                        dataType: 'json',
                        success: function(data) {
                            //发异步，把数据提交给php
                            layer.alert("增加成功", {
                                    icon: 6
                                },
                                function() {
                                    // 获得frame索引
                                    var index = parent.layer.getFrameIndex(window.name);
                                    //关闭当前frame
                                    parent.layer.close(index);
// 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                });
                        },
                        error: function(data) {
                            console.log(data.msg);
                        },
                    });



                    return false;
                });

        });</script>
<script type="text/javascript">
    $list = $("#fileList"),
        $btn = $("#btn-star"),
        state = "pending",
        uploader;
    // var $list=$("#fileList");   //这几个初始化全局的百度文档上没说明，好蛋疼
    var thumbnailWidth = 100;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档
    var thumbnailHeight = 100;
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // swf文件路径
        swf: '/admin/static/webuploader/0.1.5/Uploader.swf', //加载swf文件，路径一定要对
        // 文件接收服务端。
        server: '{{url("/admin/topic/upload")}}',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        // pick: '#filePicker',
        // 设置一张图片
        pick: {
            id: '#filePicker',
            multiple:false,
            label: '点击选择图片'
        },
        formData: {
            // 这里的token是外部生成的长期有效的，如果把token写死，是可以上传的。
            _token:'{{csrf_token()}}'
            // 我想上传时再请求服务器返回token，改怎么做呢？反复尝试而不得。谢谢大家了！
            //uptoken_url: '127.0.0.1:8080/examples/upload_token.php'
        },

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/'
        }
    });
    //上传完成事件监听
    uploader.on( 'fileQueued', function(file) {
        var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
            '<img>' +
            '<div class="info">' + file.name + '</div>' +
            '</div>'
            ),
            $img = $li.find('img');
        // $list为容器jQuery实例
        $list.append( $li );
        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            $img.attr( 'src', src );
        }, thumbnailWidth, thumbnailHeight );
    });

</script>
</body>

</html>
